<template>
<el-card style="height: 700px;">
  <div style="text-align: center;">
    <div style="padding: 20px; font-size: 20px; font-weight: bold; color: blue; letter-spacing: 3px; width: 60%">基本信息配置</div>
    <el-form :model="userConfigInfo"
             label-width="200px"
             :rules="rules"
             ref="ruleFormRef"
             status-icon
    >
<!--      <el-form-item label="id">
        <el-input v-model="userConfigInfo.id" disabled style="width:50%"/>
      </el-form-item>-->
      <el-form-item label="ip地址+端口" prop="ip">
        <el-input v-model="userConfigInfo.ip" clearable style="width:50%"/>
      </el-form-item>
      <el-form-item label="AppKey" prop="app_key">
        <el-input v-model="userConfigInfo.app_key" clearable style="width:50%" />
      </el-form-item>
      <el-form-item label="Secret" prop="secret">
        <el-input v-model="userConfigInfo.secret" clearable style="width:50%" />
      </el-form-item>
      <el-form-item label="异常事件历史流回访时间" prop="playback_time">
        <el-input v-model="userConfigInfo.playback_time" clearable style="width:50%" />
      </el-form-item>
      <el-form-item label="历史流每天开始识别时间" prop="his_identify_time">
        <el-input v-model="userConfigInfo.his_identify_time" clearable style="width:50%" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(ruleFormRef)">提交</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button @click="clearAll">清空</el-button>
      </el-form-item>
    </el-form>
  </div>


  </el-card>
</template>


<script lang="ts" setup>

import {ref, toRefs, reactive, onMounted} from "vue";
import {UserConfigData} from "@/entityapi/base";
import {getUserConfigApi, updateUserConfigApi} from "@/api/userconfigapi";
import {ElMessage, FormInstance, FormRules} from "element-plus";
//定义变量
const state=reactive({
  userConfigInfo:{
    id:1,
    ip:"",
    app_key:"",
    secret:"",
    playback_time:"",
    his_identify_time:"",
  } as UserConfigData,
  userConfigInfoNull:{
    id:1,
    ip:"",
    app_key:"",
    secret:"",
    playback_time:"",
    his_identify_time:"",
  } as UserConfigData,

});
const{
  userConfigInfo
}=toRefs(state)

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  ip: [
    {required: true, message: '内容不能为空', trigger: 'blur'},//非空校验
    {min:1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur'},//字数限制
  ],
  app_key: [
    {required: true, message: '内容不能为空', trigger: 'blur'},
  ],
  secret: [
    {required: true, message: '内容不能为空', trigger: 'blur'},
  ],
  playback_time: [
    {required: true, message: '内容不能为空', trigger: 'blur'},
  ],
  his_identify_time: [
    {required: true, message: '内容不能为空', trigger: 'blur'},
  ],
})

//初始化方法
onMounted(() => {
 getUserConfigInfo()
});

function getUserConfigInfo(){
  getUserConfigApi().then((res:any) => {
    state.userConfigInfo=res.data
  })
}

function onSubmit(formEl: FormInstance | undefined){
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      updateUserConfigApi(state.userConfigInfo).then((res:any) => {
        if(res.code==200){
          ElMessage({
            showClose: true,
            message: '修改成功',
            type: 'success',
          })
          getUserConfigInfo()
        }else{
          ElMessage({
            showClose: true,
            message: '修改失败，请重试',
            type: 'error',
          })
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })

}

function reset(){
  getUserConfigInfo()
}

function clearAll(){
  state.userConfigInfo=state.userConfigInfoNull
}
</script>
